// // import React, { useState, useEffect } from 'react';
// // import { Bar } from '@ant-design/plots';
// //
// // const DemoBar = () => {
// //   const [chartData, setChartData] = useState(null);
// //
// //   useEffect(() => {
// //     const fetchData = async () => {
// //       const url = "http://127.0.0.1:8089/user/user";
// //
// //       try {
// //         const response = await fetch(url, {
// //           method: 'GET',
// //           headers: {
// //             Authorization: localStorage.getItem('Authorization')
// //           },
// //         });
// //
// //         if (!response.ok) {
// //           throw new Error(`HTTP error! status: ${response.status}`);
// //         }
// //
// //         const res = await response.json();
// //         const data = res.data.map(item => ({
// //           username: item.username,
// //           userAge: item.userAge,
// //         }));
// //
// //         // 只保留前20个数据点
// //         const filteredData = data.slice(0, 20);
// //
// //         setChartData(filteredData); // 更新图表数据状态
// //       } catch (error) {
// //         console.error('Error fetching data:', error);
// //       }
// //     };
// //
// //     fetchData();
// //   }, []);
// //
// //   if (!chartData) {
// //     return <div>Loading...</div>;
// //   }
// //
// //   const config = {
// //     data: chartData,
// //     xField: 'username',
// //     yField: 'userAge',
// //     sort: {
// //       reverse: true,
// //     },
// //     // tooltip: {
// //     //   showTitle: true,
// //     //   titleField: 'username',
// //     //   formatter: (datum) => {
// //     //     return {
// //     //       name: datum.username,
// //     //       value: datum.userAge,
// //     //     };
// //     //   },
// //     // },
// //     axis: {
// //       y: {
// //         tickCount: 20, // 设置 y 轴刻度数量，根据你的数据点数量调整
// //         nice: true, // 是否美化 y 轴范围
// //         label: {
// //           rotate: 0, // 标签旋转角度
// //         },
// //       },
// //     },
// //   };
// //
// //   return <Bar {...config} />;
// // };
// //
// // export default DemoBar;
// // index.js
// import React, { useState, useEffect } from 'react';
// import ReactDOM from 'react-dom';
// import DemoBar from './Chart';
// import DemoScatter from './Chart2';
// import "./App.css";
//
// const App = () => {
//   const [chartData, setChartData] = useState([]);
//
//   useEffect(() => {
//     const fetchData = async () => {
//       const url = "http://127.0.0.1:8089/user/user"; // 移除了 HTML 实体编码
//
//       try {
//         const response = await fetch(url, {
//           method: 'GET',
//           headers: {
//             Authorization: localStorage.getItem('Authorization')
//           },
//         });
//
//         if (!response.ok) {
//           throw new Error(`HTTP error! status: ${response.status}`);
//         }
//
//         const res = await response.json();
//         const data = res.data.map(item => ({
//           username: item.username,
//           userAge: item.userAge,
//           userSex: item.userSex,
//           userId: item.userId,
//           userDeptId: item.userDeptId,
//         }));
//
//         setChartData(data.slice(0, 20)); // 只保留前20个数据点
//       } catch (error) {
//         console.error('Error fetching data:', error);
//       }
//     };
//
//     fetchData();
//   }, []); // 空依赖数组确保函数只在组件挂载时执行一次
//
//   return (
//     <div className="App">
//       <div className="chart-row">
//         <>
//           <div className="chart-column">
//             <DemoBar data={chartData} />
//           </div>
//           <div className="chart-column">
//             <DemoScatter data={chartData} />
//           </div>
//         </>
//       </div>
//       <div className="chart-row">
//         <>
//           <div className="chart-column">
//             <DemoBar data={chartData} />
//           </div>
//           <div className="chart-column">
//             <DemoBar data={chartData} />
//           </div>
//         </>
//
//       </div>
//     </div>
//   );
// };
//
// ReactDOM.render(<App />, document.getElementById('root'));
// export default App;
// index.js
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import DemoBar from './Chart';
import DemoScatter from './Chart2';
import DemoLiquid from './chart3';
import "./App.css";
import DemoPie from './chart4';


const App = () => {
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const url = "http://127.0.0.1:8089/user/user";

      try {
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            Authorization: localStorage.getItem('Authorization')
          },
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const res = await response.json();
        const data = res.data.map(item => ({
          username: item.username,
          userAge: item.userAge,
          userSex: item.userSex,
          userId: item.userId,
          userDeptId: item.userDeptId,
        }));

        setChartData(data.slice(0, 20)); // 只保留前20个数据点
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="App">
      <div className="chart-row">
        <div className="chart-column">
          <DemoBar data={chartData} />
        </div>
        <div className="chart-column">
          <DemoScatter data={chartData} />
        </div>
      </div>
      <div className="chart-row">
        <div className="chart-column">
          <DemoLiquid />
        </div>
        <div className="chart-column">
          <DemoPie data={chartData} />
        </div>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
export default App;
